<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FinalShell密码解密 - 赛马牛的博客</title>
    <!--移动端设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta property="qc:admins" content="171255133211636" />
    <meta name="keywords" content="赛马牛的博客,赛马牛,博客,技术博客,个人博客,blog" />
    <meta name="description" content="赛马牛的博客，分享个人生活、理想和技术的博客" />
    <meta name="author" content="赛马牛,Dennis Wong,1656239759@qq.com">
    <link rel="stylesheet" href="/static/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/layui.css"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/index.js" type="text/javascript" charset="utf-8" defer="defer"></script>
    <style>
        .decode-button-box {
            text-align: center;
        }
        .decode-button {
            margin-top: 40px;
            width: 100px;
        }
        .error-tips {
            color: red;
        }
        #to-top{
            text-align: center;
            display: none;
            width: 50px;
            height: 50px;
            /*background: url('images/to-top.png') no-repeat;*/
            background: #D9534F;
            border-radius: 50%;
            position: fixed;
            bottom: 50px;
            right: 50px;
            transition: all 1s;
            -webkit-transition:all 1s;
            -moz-transition:all 1s;
            -o-transition:all 1s;
            cursor: pointer;
        }
        #to-top .to-top{
            font-weight: 600;
            line-height: 48px;
            font-size: 40px;
        }
        #to-top:hover{
            /*transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);*/
            opacity: .7;
        }
    </style>
</head>
<body>
<!--头部-->
<script type="text/javascript">
    $(function () {
        $('main').css({'margin-top' : $('header').height() + 'px'});
    })
</script>
<header>
    <div class="w100">
        <nav>
            <div class="container nav-box">
                <div id="logo">
                    <a href="/" style="display: flex;"><img src="/static/images/logo.png" alt="" /></a>
                </div>
                <ul class="big-nav">
                    <li th:class="${categoryId == 0} ? 'bg-red'">
                        <a href="/">首页</a>
                    </li>
                    <li th:each="item,key:${categoryList}" th:style="${key.index > 10} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                        <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                    </li>
                </ul>

                <div class="nav-toggle">
                    <i class="icon iconfont">&#xe696;</i>
                </div>
            </div>
            <div class="nav-display-box">
                <ul class="first-ul">
                    <li th:class="${categoryId == 0} ? 'bg-red'">
                        <a href="/">首页</a>
                    </li>

                    <li th:each="item,key:${categoryList}" th:style="${key.index > 10} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                        <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
</header>
<!--头部结束-->
<!--主体-->
<main>
    <div class="container">
        <!--文章-->
        <div class="w66 left">
            <article>
                <div class="article">
                    <!-- 首页文章 -->
                    <block name="index_art">
                        <div class="border">
                            <section>
                                <h1>资产增值计算小工具</h1>
                                <h5>现有资产(单位：万)：</h5>
                                <input type="number" class="layui-input" id="current_assets" /><br />
                                <h5>现有资产平均年收益率（百分数，如20%，则填20）：</h5>
                                <input type="number" class="layui-input" id="yearly_income_percentage" /><br />
                                <h5>每年额外增加平均资产（单位：万）：</h5>
                                <input type="number" class="layui-input" id="extra_addition_assets" /><br />
                                <h5>历时年限（输入该值为10年，则会计算未来10年内，你每年的资产情况）：</h5>
                                <input type="number" class="layui-input" id="years" /><br />

                                <textarea style="min-height: 500px;" class="layui-textarea" id="content"></textarea>
                                <span style="color: red;">* 因为个人原因不同，当年的额外收入不计算收益，本算法根据年末增加额外收入计算，本年的额外收入从第二年开始计算收益</span>

                                <div class="decode-button-box">
                                    <button class="layui-btn submit-button">计算</button>
                                </div>
                            </section>
                        </div>

                </div>
            </article>
        </div>
        <!--文章结束-->
        <!--右侧-->
        <div class="right w33">
            <asid>
                <div class="">
                    <!--标签-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">最新文章</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show link">
                                    <ul>
                                        <li th:each="item:${newestSixArticleList.list}">
                                            <a th:if="${item.type == 1}" th:href="'/detail?id=' + ${item.id}" target="_block" th:text="${item.title}"></a>
                                            <a th:if="${item.type == 2}" th:href="${item.link}" target="_block" th:text="${item.title}"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </section>
                    </div>
                    <!--标签结束-->
                    <!--标签-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">热门标签</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show tag">

                                    <a th:each="item:${recommendLabelList}" th:href="'/?l=' + @{(${item.id})}" class="btn btn-read" style="font-size:12px;margin-right:20px;margin-bottom:10px;" th:text="@{(${item.title})} + '(' + @{(${item.article_count})} + ')'"></a>

                                </div>
                            </div>
                        </section>
                    </div>
                    <!--标签结束-->
                    <!--友情链接-->
                    <div class="border tags-cloud">
                        <section>
                            <ul class="nav-pills">
                                <li><a href="javascript:;">友情链接</a></li>
                            </ul>
                            <div class="bottom">
                                <div id="" class="tags-cloud-show link">
                                    <ul>
                                        <li th:each="item:${friendsLinkList}"><a th:href="${item.link}" target="_block" th:text="${item.name}"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </section>
                    </div>
                    <!--友情链接结束-->
                </div>
            </asid>
        </div>
        <!--右侧结束-->
    </div>
</main>
<!--主体结束-->
<div th:replace="client/common/footer::footer"></div>
<script src="/static/js/layui.js"></script>
<script>
    $('.submit-button').click(function() {
        let currentAssets = $('#current_assets')
        let yearlyIncomePercentage = $('#yearly_income_percentage')
        let extraAdditionAssets = $('#extra_addition_assets')
        let years = $('#years')
        let content = $('#content')
        if(! currentAssets.val())
        {
            alert('请输入当前资产')
            return false
        }
        if(! yearlyIncomePercentage.val())
        {
            alert('请输入现有资产平均年收益率')
            return false
        }
        if(! extraAdditionAssets.val())
        {
            alert('请输入每年额外增加平均资产')
            return false
        }
        if(! years.val())
        {
            alert('请输入历时年限')
            return false
        }

        let text = "初始资产：" + currentAssets.val() + "万，本金理财平均年化利率：" + yearlyIncomePercentage.val() + "%，每年非理财平均收入：" + extraAdditionAssets.val() +  "万\n\n";
        // 累计资产
        let countAssets = currentAssets.val()
        // 累计本金
        let principalAssets = currentAssets.val();
        // 计算出累积的收益
        let countIncome = 0
        for (let i = 1; i <= years.val(); i++) {
            // 当年收益
            let currentIncome = parseInt(countAssets) * parseInt(yearlyIncomePercentage.val()) / 100
            countAssets = (parseInt(countAssets) + parseInt(countAssets) * parseInt(yearlyIncomePercentage.val()) / 100) + parseInt(extraAdditionAssets.val());
            // 累积本金
            principalAssets = parseInt(principalAssets) + parseInt(extraAdditionAssets.val())
            let noAddExtraPrincipalAssets = principalAssets - parseInt(extraAdditionAssets.val())
            // 计算出累积的收益
            countIncome += currentIncome
            text += '第' + i.toString() + '年年末总资产为：' + countAssets.toFixed(2).toString() + "万，其中"+ principalAssets.toFixed(2) +"万为本金。" +
                "年度计算收益本金为：" + noAddExtraPrincipalAssets + "万，年度收益为：" + currentIncome.toFixed(2).toString() + "万，"+ i +"年累计收益为：" + countIncome.toFixed(2) +"万\n\n";
        }

        content.text(text)
    })

    $(window).ready(function() {
        if ($('footer').offset().top < $(window).height()) {
            $('footer').addClass('footer-to-low');
        }
    })
</script>
</body>
</html>